/*
$resVar: (
    sm: $smallR,
    md: $mediumR,
    lg: $largeR,
    xl: $xtraR,
);
*/

/*
How to Use
@include border(10px, 10px, 10px, 10px, transparent, transparent, transparent, #000000 );
*/

/*
 USAGE:
 -- Dafault corner is set in variable.scss file under variable name '$allCornerDefault' -- value is 5 by default
 -- Deafault Unit is set in variable.scss file under variable name '$defaultSymbol' -- unit is px by default
 For percentage or any symbol based measurement we have to use single quotes.
 For text based mesurement we can write it with or without single quotes.

 EXAMPLE:
 @include allRound(20);
 @include allRound(20,'%');
 @include allRound(20,em);

*/

/*
 USAGE:
 Same as allRadius()

 EXAMPLE:
 @include fourRadius();
 @include fourRadius(10,10,10,10);
 @include fourRadius(10,10,10,10,'%');
 @include fourRadius(10,10,10,10,em);

*/

/*
 USAGE:
 Same as allRadius()

 EXAMPLE:
 @include tlRadius();
 @include tlRadius(10, '%');
 @include tlRadius(10, em);

*/

/*
 USAGE:
 Same as allRadius()

 EXAMPLE:
 @include trRadius();
 @include trRadius(10, '%');
 @include trRadius(10, em);

*/

/*
 USAGE:
 Same as allRadius()

 EXAMPLE:
 @include brRadius();
 @include brRadius(10, '%');
 @include brRadius(10, em);

*/

/*
 USAGE:
 Same as allRadius()

 EXAMPLE:
 @include blRadius();
 @include blRadius(10, '%');
 @include blRadius(10, em);

*/

/*
How to Use
@include boxS(10px, 10px, 5px, 0px, rgba(0,0,0,0.75));
1. Horizontal Length
2. Vertical Length
3. Blur Radius
4. Spread Radius
5. Shadow Color
*/

/*
How to Use
@include insetS(10px, 10px, 5px, 0px, rgba(0,0,0,0.75));
1. Horizontal Length
2. Vertical Length
3. Blur Radius
4. Spread Radius
5. Shadow Color
*/

/* Medium Layout: 1280px */

/* Tablet Layout: 768px */

/* Mobile Layout: 320px */

/* Wide Mobile Layout: 480px */

/*
@mixin res($view) {
   @media (min-width: map-get($resVar, $view)) {
       @content;
   }
}
*/

/*
 Usage
 @include lg{
    Put your CSS Here
 }
 */

/*
 Usage
 @include print {
    Put your CSS Here
 }
 */

/*
 Usage
 @include custom(850px, 1190px){
    Put your CSS Here
 }
 */


 @keyframes fadeOut {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fade-out {
    opacity: 1;
    animation: fadeOut 5s ease-in forwards;
}

/* light box overrides */

.lightboxOverlay {
    background-color: #fff;
    opacity: 1;
}

.lb-data .lb-close {
    display: none;
}

.navbar-white#mainNav .navbar-nav .nav-item a {
    color: #999;
}

.navbar-white#mainNav .navbar-nav .nav-item a:hover {
    color: #000;
}

.mainNav--home.navbar-white#mainNav svg#brand {
    fill: #000;
}

svg#brand {
    fill: #fff;
}

.project-images img {
    width: 100%;
}

/* lightbox */

.lb-nav a.lb-next {
    background: none;
}

.lb-nav a.lb-prev {
    background: none;
}

.fade {
    opacity: 1;
    position: relative;
    top: 45px;
    transition-property: top;
    transition-duration: 0.5s;
}

.navbar-brand {
    margin-left: 15px;
    padding-top: 9px;
    margin: 0 0;
    width: 157px;
}

.project-image-container {
    background-color: #000;
}

.project-image-container img {
    height: 100%;
    width: 100%;
}

.project-image-container img:hover {
    opacity: 0.8;
}

.inner-section {
    min-height: calc(100vh - (80px + 100px));
}

.navbar-toggler-icon {
    color: #FFF;
    width: 20px;
    height: 20px;
}

.navbar-toggler-icon .fas {
    padding-top: 5px;
}

.ios-drop {
    margin: 15px 0;
    height: 130px;
    width: 90%;
    position: relative;
    color: #000;
    overflow: hidden;
    -webkit-transition: all 0.1s ease 0s;
    -moz-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
}

.ios-drop .gt-arrow {
    transform: matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    transform-origin: center 30% 0px;
}

.animate-tb {
    height: 20px;
    margin-top: 0;
    height: 28px;
    margin: 0 0;
}

.animate-tb .gt-arrow {
    background-image: url("../images/dd-arrow-grey.png");
    background-size: contain;
    -webkit-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    -moz-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    -ms-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    -o-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
}

.animate-tb .left-sec-list.scroll-bar:hover {
    overflow: hidden;
}

.left-sec-list {
    float: left;
    width: auto;
    height: auto;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.left-sec-list.scroll-bar {
    position: absolute;
    width: 110%;
    height: 100%;
    overflow: hidden;
}

.left-sec-list.scroll-bar:hover {
    overflow-y: auto;
}

.left-sec-list.scroll-bar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 12px;
}

.left-sec-list.scroll-bar::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: #8f8e8e;
    -webkit-box-shadow: 0 0 1px rgba(201, 201, 201, 0.5);
    display: block;
}

.left-sec-list.scroll-bar::-webkit-scrollbar-track {
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.left-sec-list ul {
    width: 81%;
}

.left-sec-list ul li {
    padding: 16px 0 0;
}

.left-sec-list ul li a {
    color: #929496;
    font-size: 20px;
}

.left-sec-list ul li a:hover {
    text-decoration: none;
    color: #272525;
}

.left-sec-list ul li a.active {
    font-family: "akzidenz-grotesk-medium";
    color: #272525;
}

.left-sec-list ul li:last-child {
    padding-bottom: 15px;
}

.gt-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -moz-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -ms-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -o-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-image: url("../images/dd-arrow-grey.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 15px;
}

.sdown .gt-arrow {
    background-image: url("../images/dd-arrow-grey.png");
    -webkit-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -moz-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -ms-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    -o-transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    transform: translateY(-60%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}

.sUp .gt-arrow {
    -webkit-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    -moz-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    -ms-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    -o-transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    transform: translateY(-50%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
    transform-origin: center 30% 0px;
}

.large-img-ban-wrapper {
    float: left;
    width: 100%;
    height: auto;
}

.large-img-ban-wrapper .lg-img-wrap {
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.large-img-ban-wrapper .lg-img-wrap img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.large-img-ban-wrapper .lg-img-wrap:hover img {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

.large-img-ban-wrapper img {
    width: 100%;
    outline: none;
    border: none;
}

.large-bgimg-ban-wrapper {
    float: left;
    width: 100%;
    height: auto;
}

.large-bgimg-ban-wrapper .lg-bgimg-wrap {
    float: left;
    width: 100%;
    height: 1065px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.typo-medium {
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #939598;
    line-height: 1.3;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-medium {
        font-size: 22px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-medium {
        font-size: 20px;
    }
}

@media screen and (max-width: 575px) {
    .typo-medium {
        font-size: 20px;
    }
}

.typo-medium * {
    word-wrap: break-word;
}

.typo-medium h1,
.typo-medium h2,
.typo-medium h3,
.typo-medium h4,
.typo-medium h5,
.typo-medium h6 {
    font-family: "akzidenz-grotesk-medium", Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: #231f20;
    padding: 0 0 5px 0;
}

.typo-medium h1 {
    font-size: 30px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-medium h1 {
        font-size: 28px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-medium h1 {
        font-size: 27px;
    }
}

@media screen and (max-width: 575px) {
    .typo-medium h1 {
        font-size: 27px;
    }
}

.typo-medium h2 {
    font-size: 28px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-medium h2 {
        font-size: 26px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-medium h2 {
        font-size: 25px;
    }
}

@media screen and (max-width: 575px) {
    .typo-medium h2 {
        font-size: 25px;
    }
}

.typo-medium h3 {
    font-size: 26px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-medium h3 {
        font-size: 25px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-medium h3 {
        font-size: 24px;
    }
}

@media screen and (max-width: 575px) {
    .typo-medium h3 {
        font-size: 24px;
    }
}


.typo-medium h4 {
    font-size: 24px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-medium h4 {
        font-size: 22px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-medium h4 {
        font-size: 21px;
    }
}

@media screen and (max-width: 575px) {
    .typo-medium h4 {
        font-size: 21px;
    }
}

.typo-medium h5 {
    font-size: 19px;
}

.typo-medium h6 {
    font-size: 17px;
}

.typo-medium p {
    font-size: inherit;
    padding: 0 0 5px 0;
}

.typo-medium a {
    color: #939598;
    text-decoration: none;
}

.typo-medium a:hover {
    text-decoration: none;
    color: #231f20;
}

.typo-medium b,
.typo-medium strong {
    font-weight: bold;
}

.typo-medium i,
.typo-medium em {
    font-style: italic;
}

.typo-medium ul {
    list-style-position: outside;
    margin-left: 21px;
    list-style: disc;
    padding: 0 0 9px 0;
}

.typo-medium li {
    padding-bottom: 1px;
}

.typo-medium ol {
    list-style-position: outside;
    margin-left: 21px;
    list-style: decimal;
    padding: 0 0 9px 0;
}

.typo-medium ol li {
    padding-left: 4px;
}

.typo-light {
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #939598;
    line-height: 1.3;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light {
        font-size: 19px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light {
        font-size: 18px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light {
        font-size: 18px;
    }
}

.typo-light * {
    word-wrap: break-word;
}

.typo-light h1,
.typo-light h2,
.typo-light h3,
.typo-light h4,
.typo-light h5,
.typo-light h6 {
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #231f20;
    padding: 0 0 0 0;
}

.typo-light h1 {
    font-size: 28px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light h1 {
        font-size: 27px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light h1 {
        font-size: 26px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light h1 {
        font-size: 26px;
    }
}

.typo-light h2 {
    font-size: 24px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light h2 {
        font-size: 23px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light h2 {
        font-size: 22px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light h2 {
        font-size: 22px;
    }
}

.typo-light h3 {
    font-size: 22px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light h3 {
        font-size: 21px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light h3 {
        font-size: 20px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light h3 {
        font-size: 20px;
    }
}

.typo-light h4 {
    font-size: 20px;
    line-height: 1.8;

}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light h4 {
        font-size: 19px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light h4 {
        font-size: 18px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light h4 {
        font-size: 18px;
    }
}

.typo-light h5 {
    font-size: 18px;
}

.typo-light h6 {
    font-size: 16px;
}

.typo-light p {
    font-size: 18px;
    padding: 0 0 5px 0;
    line-height: 1.5;
    /* 假设这是div的行距 */
}

.typo-light a {
    color: #939598;
    text-decoration: none;
}

.typo-light a:hover {
    text-decoration: none;
    color: #231f20;
}

.typo-light b,
.typo-light strong {
    font-weight: bold;
}

.typo-light i,
.typo-light em {
    font-style: italic;
}

.typo-light ul {
    list-style-position: outside;
    margin-left: 0;
    list-style: disc;
    padding: 0 0 9px 0;
}

.typo-light li {
    padding-bottom: 5px;
}

.typo-light ol {
    list-style-position: outside;
    margin-left: 21px;
    list-style: decimal;
    padding: 0 0 9px 0;
}

.typo-light ol li {
    padding-left: 4px;
}

.typo-light-medium {
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #939598;
    line-height: 1.3;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light-medium {
        font-size: 19px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light-medium {
        font-size: 18px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light-medium {
        font-size: 18px;
    }
}

.typo-light-medium * {
    word-wrap: break-word;
}

.typo-light-medium h1,
.typo-light-medium h2,
.typo-light-medium h3,
.typo-light-medium h4,
.typo-light-medium h5,
.typo-light-medium h6 {
    font-family: "akzidenz-grotesk-medium", Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #231f20;
    padding: 0 0 5px 0;
}

.typo-light-medium h1 {
    font-size: 28px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light-medium h1 {
        font-size: 27px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light-medium h1 {
        font-size: 26px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light-medium h1 {
        font-size: 26px;
    }
}

.typo-light-medium h2 {
    font-size: 24px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light-medium h2 {
        font-size: 23px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light-medium h2 {
        font-size: 22px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light-medium h2 {
        font-size: 22px;
    }
}

.typo-light-medium h3 {
    font-size: 22px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light-medium h3 {
        font-size: 21px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light-medium h3 {
        font-size: 20px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light-medium h3 {
        font-size: 20px;
    }
}

.typo-light-medium h4 {
    font-size: 20px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .typo-light-medium h4 {
        font-size: 19px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .typo-light-medium h4 {
        font-size: 18px;
    }
}

@media screen and (max-width: 575px) {
    .typo-light-medium h4 {
        font-size: 18px;
    }
}

.typo-light-medium h5 {
    font-size: 18px;
}

.typo-light-medium h6 {
    font-size: 16px;
}

.typo-light-medium p {
    font-size: inherit;
    padding: 0 0 5px 0;
}

.typo-light-medium a {
    color: #939598;
    text-decoration: none;
}

.typo-light-medium a:hover {
    text-decoration: underline;
}

.typo-light-medium b,
.typo-light-medium strong {
    font-weight: bold;
}

.typo-light-medium i,
.typo-light-medium em {
    font-style: italic;
}

.typo-light-medium ul {
    list-style-position: outside;
    margin-left: 21px;
    list-style: disc;
    padding: 0 0 9px 0;
}

.typo-light-medium li {
    padding-bottom: 1px;
}

.typo-light-medium ol {
    list-style-position: outside;
    margin-left: 21px;
    list-style: decimal;
    padding: 0 0 9px 0;
}

.typo-light-medium ol li {
    padding-left: 4px;
}

.light-txt {
    color: #a7a9ac;
}

.mb-box {
    margin-bottom: 28px;
}

.img-cc-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cus-img-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.cus-img-flex img {
    max-width: 100%;
    max-height: 100%;
}

.bg-lightgreen {
    background-color: #c1d83c;
}

.bg-lightblue {
    background-color: #00c1f0;
}

.bg-lightgrey {
    background-color: #f1f3f2;
}

.bg-orange {
    background-color: #e46b1f;
}

.bg-green {
    background-color: #00a648;
}

.bg-blue {
    background-color: #0074b8;
}

.bg-blue-bright {
    background-color: #58caf2;
}

.bg-yellow-bright {
    background-color: #f4ec51;
}

.bg-pink {
    background-color: #b053a0;
}

.bg-silver-brown {
    background-color: #7a7c01;
}

.bg-blue-shade1 {
    background-color: #6c86bc;
}

.bg-blue-shade2 {
    background-color: #9db3d7;
}

.bg-blue-shade3 {
    background-color: #c6daf2;
}

.bg-brown-light {
    background-color: #d0bf81;
}

.bg-black {
    background-color: #000;
}

.active-menu {
    color: #000 !important;
    font-family: "akzidenz-grotesk-medium";
}

.contact-btm {
    padding: 49px 0 100px 0;
}

.contact-btm .typo-light p {
    line-height: 1.5;
}

.news-img-ht {
    height: 786px;
    overflow: hidden;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .news-img-ht {
        height: 580px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .news-img-ht {
        height: 450px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .news-img-ht {
        float: none;
        display: block;
        margin: 0 auto 35px auto;
        max-width: 480px;
        height: 480px;
    }
}

@media screen and (max-width: 575px) {
    .news-img-ht {
        float: none;
        display: block;
        margin: 0 auto 35px auto;
        max-width: 320px;
        height: 320px;
    }
}

.news-img-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.news-img-flex img {
    max-width: 100%;
    max-height: 100%;
}

.news-img-bg {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.news-list {
    padding: 0 0 135px 0;
    overflow: hidden;
}

.news-list .img-tc-cover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.news-list a:hover .img-tc-cover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.news-list-content {
    padding: 26px 0 0 0;
}

.news-list-content a {
    color: #939598;
}

.news-list-content a:hover {
    color: #231f20;
}

.dflex-bg {
    display: flex;
    width: 100%;
    height: 100%;
}

.news-sel-inner {
    padding: 0 0 120px 0;
    clear: both;
}

.news-sel-inner .img-tc-cover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.news-sel-inner a:hover .img-tc-cover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.more-news-in {
    padding: 22px 0 0 0;
}

.more-news-hdr {
    padding: 0 0 41px 0;
}

.more-news-list {
    padding: 20px 0 25px 0;
}

.more-news-list .img-cc-cover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.more-news-list a:hover .img-cc-cover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.more-img-ht {
    height: 377px;
    overflow: hidden;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .more-img-ht {
        height: 285px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .more-img-ht {
        height: 285px;
    }
}

.more-ncontent {
    padding: 25px 0 10px 0;
}

.approach-main {
    margin: 0 0 150px;
}

.mp-sub-menu {
    height: 83px;
    align-items: center;
}

.mp-sub-menu ul {
    margin-left: 0;
    list-style: none;
    padding: 0 0;
}

.mp-sub-menu ul li {
    display: inline-block;
    font-size: 20px;
    width: auto;
    color: #231f20;
    margin-right: 75px;
}

.mp-sub-menu ul li:last-child {
    margin-right: 0;
}

.mp-sub-menu ul li.active {
    font-family: "akzidenz-grotesk-medium";
}

.mp-sub-menu ul li a {
    font-size: 20px;
    font-weight: 300;
    color: #999;
}

.mp-sub-menu ul li a:hover {
    text-decoration: none;
    color: #231f20;
}

.approach-img {
    margin-bottom: 30px;
}

.approach-img .app-img-wrap {
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.approach-img .app-img-wrap img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.approach-img .app-img-wrap:hover img {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

.approach-text {
    color: #272525;
    font-size: 20px;
    padding: 60px 20px 80px 0;
}

.approach-text h4 {
    font-size: 28px;
    /* 电脑版作品内页标题大小 */
    /* 20  font size reverted */
    margin-bottom: 90px;
    color: #272525;
    line-height: 1.5;
}

.approach-text h3 {
    font-size: 18px;
    /* 电脑版作品内页副标题大小 */
    /* 20  font size reverted */
    margin-bottom: 10px;
    color: #272525;
    line-height: 1.8;
    text-align: justify;
    /* 已经设置，确保它没有被其他样式覆盖 */
    word-spacing: normal;
    /* 确保单词间距正常 */
    letter-spacing: normal;
    /* 确保字母间距正常 */
}

.approach-text h5 {
    font-size: 17px;
    /* 电脑版作品内页副标题大小 */
    /* 20  font size reverted */
    margin-bottom: 50px;
    color: #272525;
    line-height: 1.6;
    text-align: justify;
    /* 已经设置，确保它没有被其他样式覆盖 */
    word-spacing: normal;
    /* 确保单词间距正常 */
    letter-spacing: normal;
    /* 确保字母间距正常 */
    font-weight:300;
}

.approach-text h2 {
    font-size: 16px;
    /* 电脑版作品内页副标题大小 */
    /* 20  font size reverted */
    margin-bottom: 90px;
    color: #272525;
    line-height: 1;
    text-align: justify;
}

.approach-text h1 {
    font-size: 14px;
    /* 电脑版作品内页项目类型字体大小 */
    /* 20  font size reverted */
    margin-bottom: 15px;
    color: #272525;
    line-height: 1;
    text-align: justify;
}

/* .approach-text h4 strong {
    font-weight: 500;
    font-family: "akzidenz-grotesk-medium";
} */


.approach-text h4 span {
    color: #272525;
}

.approach-text p {
    margin-bottom: 20px;
    font-size: 18px;
    /* 电脑版作品内页副标题大小 */
    line-height: 1.8;
    text-align: justify;
}


.approach-text p strong {
    font-family: "akzidenz-grotesk-medium";
}

.approach-text p em {
    font-style: italic;
}

.approach-text a {
    color: #a6a8aa;
}

.approach-text a:hover {
    color: #272525;
    text-decoration: none;
}

.approach-text.approach-height {
    min-height: 530px;
}

.approach-sub-img {
    height: 784px;
    width: 100%;
    display: block;
    overflow: hidden;
}

.approach-sub-img .img-ap-cover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.approach-sub-img:hover .img-ap-cover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.mp-border {
    width: 100%;
    height: 1px;
    background-color: #010101;
}

.approach-sub-img-height {
    height: 522px;
}

.team-list-main {
    margin-bottom: 90px;
}

.team-list {
    width: 100%;
    height: 377px;
    margin-bottom: 30px;
    position: relative;
    display: block;
    -webkit-transition: transform 0.3s ease-out 0s;
    -moz-transition: transform 0.3s ease-out 0s;
    -o-transition: transform 0.3s ease-out 0s;
    transition: transform 0.3s ease-out 0s;
    overflow: hidden;
}

.team-list .team-img-wrap {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.team-list:hover .team-img-wrap {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.team-list .team-ovrlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.team-list .team-ovrlay h4 {
    font-size: 24px;
    font-family: "akzidenz-grotesk-medium";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    width: 100%;
    text-align: center;
    padding: 0 15px;
    line-height: 1.2;
}

.team-list .team-ovrlay h4 span {
    font-family: "akzidenz-grotesk", "Helvetica", "Arial";
}

.team-list:hover .team-ovrlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

.team-member-img {
    width: 590px;
    height: 886px;
    overflow: hidden;
}

.team-member-img .team-img-wrap {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.team-member-img:hover .team-img-wrap {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.team-detail {
    margin-top: 160px;
}

.team-member-detail {
    margin-bottom: 160px;
}

.team-list-main.product-listing-main .team-list {
    height: 513px;
    margin-bottom: 30px;
    overflow: hidden;
}

.team-list-main.product-listing-main .team-list .team-img-wrap {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 1.5s ease-out 0s;
    -moz-transition: transform 1.5s ease-out 0s;
    -o-transition: transform 1.5s ease-out 0s;
    transition: transform 1.5s ease-out 0s;
}

.team-list-main.product-listing-main .team-list:hover .team-img-wrap {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.team-list-main.product-listing-main .team-list .team-ovrlay {
    background-color: rgba(0, 0, 0, 0.35);
}

.banner-img {
    margin-top: -80px;
    text-align: center;
    min-height: calc(100vh - (140px));
}

.product-slider .home-slide {
    height: 1065px !important;
}

.product-slider .slick-prev {
    background-image: url("../images/g-arrow-left.png");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain;
    width: 15px;
    height: 25px;
    left: 25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.product-slider .slick-prev:before {
    display: none;
}

.product-slider .slick-prev:hover,
.product-slider .slick-prev:focus {
    background-image: url("../images/g-arrow-left.png");
    background-size: contain;
    background-color: unset;
}

.product-slider .slick-next {
    background-image: url("../images/g-arrow-right.png");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain;
    width: 15px;
    height: 25px;
    right: 25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.product-slider .slick-next:before {
    display: none;
}

.product-slider .slick-next:hover,
.product-slider .slick-next:focus {
    background-image: url("../images/g-arrow-right.png");
    background-size: contain;
    background-color: unset;
}

.product-text {
    padding: 120px 40px 80px 0;
}

.location-awards {
    padding: 30px 20px 80px 0;
}

.product-listing-dropdown {
    height: auto;
    padding: 30px 0 97px;
}

.product-listing-dropdown .product-listing-sub-dropdown {
    width: 240px;
}

.product-listing-dropdown .product-listing-sub-dropdown:first-child {
    margin-right: 160px;
}

.product-inner .location-awards {
    padding: 15px 20px 80px 0;
}

.product-inner .approach-text {
    padding: 60px 20px 80px 0;
}

.product-inner .product-text {
    padding: 100px 40px 100px 0;
}

.approach-main.related-project .approach-text {
    padding: 15px 20px 80px 0;
}

.approach-text.approach-bottom {
    padding: 15px 20px 80px 0;
}

.next-team-member {
    margin-top: 100px;
    display: inline-block;
    float: right;
}

.next-team-member:hover {
    text-decoration: none;
}

.filter-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 99;
    display: none;
}

.rocco-filter {
    position: relative;
    padding: 15px 0;
    width: 48.837%;
    float: left;
}

.pro-filter-items+.pro-filter-items {
    margin-right: 0;
}

.rocco-filter .card {
    display: inline-flex;
    position: static;
}

.rocco-filter .card .collapse {
    position: absolute;
    top: 50px;
    left: 0;
    background-color: white;
    z-index: 99;
    height: auto !important;
}

.rocco-filter .filter-individual {
    width: 50%;
    float: left;
}

.rocco-filter .btn {
    font-size: 16px;
    font-family: "akzidenz-grotesk-medium";
    color: #272525;
    border: none;
    outline: none;
    padding: 0 25px 0 0;
    position: relative;
}

.rocco-filter .btn:focus {
    outline: none;
    box-shadow: none;
}

.rocco-filter .btn[aria-expanded=false]:before {
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    background-image: url("../images/dd-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    height: 10px;
    width: 18px;
    transform: translateY(-36%) rotate(0deg) matrix(1, 0, 0, 1, 0, 0);
}

.rocco-filter .btn[aria-expanded=true]:before {
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    background-image: url("../images/dd-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    height: 10px;
    width: 18px;
    transform: translateY(-50%) rotate(0deg) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    transform-origin: center 60% 0px;
}

.rocco-filter .filter-collapse {
    position: absolute;
    /* bottom: 0px; */
    top: -36px;
    /* 0 */
    left: 5px;
    width: 101%;
    /* 100.35 */
    background-color: white;
    z-index: 99;
    /* transform: translateY(99%); */
    transform: translateY(90px);
    padding-top: 3px;
    padding-left: 1px;
}

.rocco-filter .filter-collapse ul {
    /* height: 69vh; */
    height: 100%;
    transition: height 0.4s ease;
}

.rocco-filter .filter-collapse ul li {
    padding-bottom: 10px;
}

.rocco-filter .filter-collapse ul li a {
    font-size: 16px;
    font-family: "akzidenz-grotesk";
    font-weight: normal;
    color: #000000;
}

.rocco-filter .filter-collapse ul li a:hover {
    text-decoration: none;
}

.rocco-filter .collapsing {
    position: absolute !important;
    transition: height 0.4s ease !important;
}

/* .rocco-filter #filter2 {
  padding-left: 336px;
} */

#filter1 ul {
    width: 50%;
    position: relative;
    left: 50%;
}

#filter2 ul {
    position: relative;
    left: 2px;
}

#filter3 ul {
    width: 100%;
    position: relative;
    left: 50%;
}

@media screen and (min-width: 1200px) and (max-width: 1349px) {
    #mainNav .navbar-nav .nav-item {
        font-size: 18px;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 18px;
    }

    footer .footer-list li {
        font-size: 18px;
    }

    footer .footer-list li a {
        font-size: 18px;
    }

    .approach-main {
        margin: 0 0 130px;
    }

    .team-list {
        height: 300px;
    }

    .team-detail {
        margin-top: 130px;
    }

    .team-member-img {
        width: 550px;
    }

    .team-list-main {
        margin-bottom: 60px;
    }

    .product-slider .home-slide {
        height: 800px !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    #mainNav .navbar-nav .nav-item {
        font-size: 16px;
        padding-right: 5%;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 16px;
    }

    .navbar-brand {
        width: 140px;
    }

    footer .footer-list .navbar-brand {
        padding: 0 0 5px;
    }

    footer .footer-list li {
        font-size: 17px;
        padding-right: 7%;
    }

    footer .footer-list li a {
        font-size: 17px;
    }

    .approach-main {
        margin: 0 0 100px;
    }

    .approach-text h4 {
        font-size: 20px;
    }

    .approach-text p {
        font-size: 18px;
    }

    .approach-sub-img {
        height: 700px;
    }

    .approach-sub-img-height {
        height: 500px;
    }

    .team-list {
        height: 260px;
    }

    .team-member-img {
        width: 100%;
    }

    .team-detail {
        margin-top: 100px;
    }

    .team-member-detail {
        margin-bottom: 80px;
    }

    .team-list-main {
        margin-bottom: 30px;
    }

    .team-list-main.product-listing-main .team-list {
        height: 400px;
    }

    .product-slider .home-slide {
        height: 700px !important;
    }

    .typo-light {
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #mainNav .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    #mainNav .navbar-nav .nav-item {
        font-size: 14px;
        padding-right: 5%;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 15px;
    }

    .navbar-brand {
        width: 120px;
    }

    footer .footer-list .navbar-brand {
        padding: 0 0 5px;
    }

    footer .footer-list li {
        width: auto;
        font-size: 17px;
        margin-right: 15px;
        padding-right: 3px;
    }

    footer .footer-list li:last-child {
        margin-right: 0;
    }

    footer .footer-list.footer-second-list ul li {
        text-align: left;
    }

    footer .footer-list li a {
        font-size: 17px;
    }

    footer .footer-list ul {
        height: 90px;
    }

    footer nav {
        height: 80px;
    }

    .approach-main {
        margin: 0 0 80px;
    }

    .approach-text h4 {
        font-size: 18px;
        margin-bottom: 80px;
    }

    .approach-text p {
        font-size: 18px;
    }

    .approach-sub-img {
        height: 500px;
    }

    .approach-sub-img-height {
        height: 400px;
    }

    .approach-img {
        margin-bottom: 20px;
    }

    .approach-text {
        font-size: 18px;
        padding: 20px 20px 60px 0;
    }

    .team-list-main .col-md-3 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .team-list {
        height: 220px;
    }

    .team-list .team-ovrlay h4 {
        font-size: 20px;
    }

    .team-list-main {
        margin-bottom: 60px;
    }

    .team-detail {
        margin-top: 50px;
    }

    .team-member-img {
        margin: 0 auto 50px;
    }

    .team-member-text .approach-text h4 {
        font-size: 24px;
    }

    .team-member-text .approach-text p {
        font-size: 20px;
    }

    .team-member-detail {
        margin-bottom: 60px;
    }

    .team-list-main {
        margin-bottom: 30px;
    }

    .team-list-main.product-listing-main .team-list {
        height: 375px;
        margin-bottom: 30px;
    }

    .team-list-main.product-listing-main .row.custom-gutter .col-md-6:nth-child(odd) {
        padding-right: 15px;
    }

    .team-list-main.product-listing-main .row.custom-gutter .col-md-6:nth-child(even) {
        padding-left: 15px;
    }

    .product-slider .home-slide {
        height: 600px !important;
    }

    .typo-light {
        font-size: 18px;
    }

    .location-awards {
        padding: 20px 20px 60px 0;
    }

    .typo-light h4 {
        font-size: 18px;
    }

    .product-text {
        padding: 60px 0 40px 0;
    }

    .product-listing-dropdown .product-listing-sub-dropdown:first-child {
        margin-right: 100px;
    }

    .left-sec-list ul li a {
        font-size: 17px;
    }

    .gt-arrow {
        widows: 20px;
        height: 10px;
    }

    .mb-80 {
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 991px) {
    .home-slide {
        height: calc(100vh - (110px)) !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .inner-section {
        margin-top: 65px;
    }

    #mainNav {
        height: auto;
        padding: 20px 0;
        background-color: white !important;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 9;
    }

    #mainNav .navbar-toggler {
        position: absolute;
        right: 30px;
        top: 1px;
        padding: 0px;
    }

    #mainNav .navbar-toggler .fa-bars {
        color: #000000;
    }

    #mainNav .nav-border {
        border-bottom: none;
        height: auto;
    }

    #mainNav .navbar-collapse {
        height: 100vh;
        padding: 70px 30px 0;
        position: fixed;
        width: 100%;
        left: 0;
        background-color: white;
        z-index: 999999999;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

    #mainNav .navbar-nav {
        min-height: 100vh;
        align-content: flex-start;
    }

    .gescout-sticky {
        opacity: 1;
    }

    #mainNav .navbar-nav .nav-item {
        font-size: 18px;
        padding-bottom: 20px;
        padding-top: 19px;
        width: 100%;
        border-top: 1px solid #cdcdcd;
        opacity: 1 !important;
    }

    #mainNav .navbar-nav .nav-item:last-child {
        border-bottom: 1px solid #cdcdcd;
    }

    #mainNav .navbar-nav .nav-item .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none;
        padding: 0 0 0 35px;
    }

    #mainNav .navbar-nav .nav-item .dropdown-menu a {
        padding: 0 0;
        margin: 40px 0 0;
        font-size: 18px;
        color: #999;
    }

    #mainNav .navbar-nav .nav-item .dropdown-menu a:last-child {
        margin-bottom: 20px;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 18px;
        color: #999 !important;
    }

    #mainNav .navbar-nav .nav-item .active.nav-link,
    #mainNav .navbar-nav .nav-item .active-menu.nav-link {
        color: #000 !important;
    }

    #mainNav .navbar-nav .nav-item .nav-link:focus {
        font-family: "akzidenz-grotesk-medium";
        color: #000 !important;
    }

    .navbar-brand {
        width: 140px;
        padding-top: 0;
    }

    .navbar-brand svg#brand {
        fill: #000000 !important;
    }

    .navbar-expand-md .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .home-slider,
    .mob-ho {
        margin-top: 65px;
    }

    .home-slide {
        height: calc(100vh - (110px)) !important;
    }

    footer .footer-list .navbar-brand {
        padding: 0 0 5px;
    }

    footer .footer-list li {
        width: auto;
        font-size: 18px;
        margin-right: 25px;
        padding-right: 0;
    }

    footer .footer-list li:last-child {
        margin-right: 0;
    }

    footer .footer-list li a {
        font-size: 18px;
    }

    footer .footer-list ul {
        justify-content: center;
        margin-bottom: 15px;
        height: auto;
    }

    footer nav {
        height: 70px;
    }

    .approach-main {
        margin: 0 0 80px;
    }

    .approach-text h4 {
        font-size: 18px;
        margin-bottom: 50px;
    }

    .approach-text p {
        font-size: 16px;
    }

    .approach-sub-img {
        height: 400px;
    }

    .approach-sub-img-height {
        height: 300px;
    }

    .approach-img {
        margin-bottom: 20px;
    }

    .approach-text {
        font-size: 18px;
        padding: 20px 0 30px 0;
    }

    .product-inner .approach-text {
        padding: 20px 0 30px 0;
    }

    .product-inner .location-awards {
        padding: 20px 20px 60px 0;
    }

    .team-list {
        height: 300px;
    }

    .team-detail {
        margin-top: 50px;
    }

    .team-member-img {
        width: 500px;
        height: 875px;
        margin: 0 auto 50px;
    }

    .team-member-text .approach-text h4 {
        font-size: 22px;
    }

    .team-member-text .approach-text p {
        font-size: 18px;
    }

    .team-member-detail {
        margin-bottom: 60px;
    }

    .team-list-main {
        margin-bottom: 50px;
    }

    .banner-img {
        margin-top: 0;
    }

    .product-slider .home-slide {
        height: 600px !important;
    }

    .typo-light {
        font-size: 18px;
    }

    .location-awards {
        padding: 20px 20px 60px 0;
    }

    .typo-light h4 {
        font-size: 18px;
    }

    .product-text {
        padding: 50px 0 10px 0;
    }

    .product-listing-dropdown .product-listing-sub-dropdown:first-child {
        margin-right: 35px;
    }

    .mainNav--home.transparent-top {
        background-image: none;
    }

    .approach-text.approach-height {
        min-height: auto;
    }

    .mb-80 {
        margin-bottom: 40px;
    }

    .splash .splash-brand img {
        height: 100%;
        width: 120%;
    }
}

@media screen and (max-width: 575px) {
    .container {
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;  
    }

    .row.custom-gutter {
        margin-right: -15px;
        margin-left: -15px;
    }

    .custom-gutter>[class*=col-],
    .custom-gutter>[class*=col] {
        padding-right: 15px;
        padding-left: 15px;
    }

    .mp-sub-menu ul li {
        font-size: 18px;
        width: auto;
        margin-right: 35px;
    }

    .mp-sub-menu ul li a {
        font-size: 18px;
    }

    .inner-section {
        margin-top: 65px;
    }

    #mainNav {
        height: auto;
        padding: 20px 0;
        background-color: white !important;
        border-bottom: none !important;
        /* position: fixed;手机版本航行栏固定 */
        width: 100%;
        top: 0;
        z-index: 9;
    }

    #mainNav .navbar-toggler {
        position: absolute;
        right: 15px;
        top: 1px;
        padding: 0;
    }

    #mainNav .navbar-toggler .fa-bars {
        color: #000000;
    }

    #mainNav .nav-border {
        border-bottom: none;
        height: auto;
    }

    #mainNav .navbar-collapse {
        height: 100vh;
        padding: 70px 15px 0;
        position: fixed;
        width: 100%;
        left: 0;
        background-color: white;
        z-index: 999999999;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

    #mainNav .navbar-nav {
        min-height: 100vh;
        align-content: flex-start;
    }

    #mainNav .navbar-nav .nav-item {
        font-size: 20px;
        padding-top: 19px;
        padding-bottom: 20px;
        width: 100%;
        border-top: 1px solid #f0f0f0;
        opacity: 1 !important;
    }

    #mainNav .navbar-nav .nav-item:last-child {
        border-bottom: 1px solid #cdcdcd;
    }

    #mainNav .navbar-nav .nav-item .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none;
        padding: 0 0 0 35px;
    }

    #mainNav .navbar-nav .nav-item .dropdown-menu a {
        padding: 0 0;
        margin: 40px 0 0;
        font-size: 18px;
        color: #999;
    }

    #mainNav .navbar-nav .nav-item .dropdown-menu a:last-child {
        margin-bottom: 20px;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        color: #999 !important;
        font-size: 18px;
    }

    #mainNav .navbar-nav .nav-item .nav-link-1 {
        color: #999 !important;
        font-size: 18px;
    }

    #mainNav .navbar-nav .nav-item .active.nav-link,
    #mainNav .navbar-nav .nav-item .active-menu.nav-link {
        color: #000 !important;
    }

    #mainNav .navbar-nav .nav-item .nav-link:focus {
        font-family: "akzidenz-grotesk-medium";
        color: #000 !important;
    }

    .navbar-expand-md .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar-brand {
        width: 140px;
        padding-top: 0;
    }

    .navbar-brand svg#brand {
        fill: #000000 !important;
    }

    .home-slider,
    .mob-ho {
        margin-top: 65px;
    }

    .home-slide {
        height: calc(100vh - (110px)) !important;
    }



    .approach-text {
        margin-bottom: 1px;
        font-size: 18px;
        line-height: 1;
        padding: 50px 20px 20px 0;
        color: #272525;

    }

    .approach-text h5 {
        font-size: 13px;
        /*作品内页标题字体大小 */
        margin-bottom: 40px !important;
        line-height: 1.5;
        text-align: justify;
        color: #939598 !important;
    }


    .approach-text h4 {
        font-size: 23px;
        /*作品内页标题字体大小 */
        margin-bottom: 10px !important;
    }

    .approach-text h3 {
        font-size: 15px;
        /*作品内页标题字体大小 */
        margin-bottom: 10px !important;
    }



    .approach-text h2 {
        font-size: 20px;
        /*作品内页标题字体大小 */
        margin-bottom: 5px !important;
        font-family: "akzidenz-grotesk-medium";
        line-height: 1.5;
        font-weight: 600;
    }

    .approach-text h2-1 {
        font-size: 22px;
        /*作品内页标题字体大小 */
        margin-bottom: 0px !important;
        font-family: "akzidenz-grotesk-medium";
        line-height: 1;
    }

    .approach-text h1 {
        font-size: 16px;
        /*作品内页标题字体大小 */
        margin-bottom: 20px !important;
        font-family: "akzidenz-grotesk-medium";
        line-height: 1.5;
        padding: 10px 0px;
    }

    .approach-text p {
        font-size: 17px;
    }

    .row .col-md-6+.col-md-6 .approach-text {
        padding: 0px 0 0px 0;
    }

    .row .col-sm-6+.col-sm-6 .approach-text {
        padding: 0px 0 0px 0;
    }

    .row.last-row-style .col-sm-6+.col-sm-6 .approach-text {
        border-top: 1px solid black;
        padding-top: 30px !important;
    }

    .mp-border.mob-brdr {
        margin-top: 30px;
    }

    .product-slider {
        margin-top: 25px;
    }

    .product-inner .approach-text {
        padding: 30px 0 0 0;
    }

    .product-inner .product-text {
        padding: 23px 0 6px 0 !important;
    }

    .product-inner .location-awards {
        padding: 20px 0 10px 0;
    }

    .approach-text.approach-bottom {
        padding: 30px 0 0 0;
    }

    .approach-sub-img {
        height: 350px;
        margin-bottom: 15px;
        background-position: center center;
    }

    .row .col-sm-6:first-child .approach-sub-img {
        margin-top: 30px;
    }

    .row .col-sm-6+.col-sm-6 .approach-sub-img {
        margin-bottom: 0;
    }

    .row .col-sm-6 .approach-sub-img-height {
        margin-bottom: 35px;
    }

    .row .col-sm-6+.col-sm-6 .approach-sub-img {
        margin-bottom: 0;
    }

    .approach-sub-img-height {
        height: 250px;
    }

    .approach-main {
        margin: 0 0 50px;
    }

    .approach-main.related-project .approach-text {
        padding: 30px 0px 0px 0;
    }

    footer nav {
        height: 70px;
    }

    footer .footer-list ul {
        justify-content: center;
        margin-bottom: 15px;
        height: auto;
    }

    footer .footer-list ul li {
        width: auto;
        font-size: 17px;
        margin-right: 10px;
        padding-right: 0;
    }

    footer .footer-list ul li a {
        font-size: 17px;
    }

    .mb-box {
        margin-bottom: 18px;
    }

    footer .footer-list .navbar-brand {
        padding: 0 0 5px;
        width: 120px;
    }

    .desk-footer {
        display: none;
    }

    footer .mob-footer {
        display: block;
    }

    .team-list-main {
        width: 290px;
        margin-left: auto;
        margin-right: auto;
    }

    .team-list-main .team-list {
        height: 290px;
    }

    .team-detail {
        margin-top: 30px;
    }

    .team-member-img {
        width: 100%;
        height: 500px;
        margin: 0 auto 50px;
    }

    .team-member-text .approach-text h4 {
        font-size: 20px;
    }

    .team-member-text .approach-text p {
        font-size: 16px;
    }

    .team-member-detail {
        margin-bottom: 60px;
    }

    .team-list-main.product-listing-main {
        width: 100%;
    }

    .team-list-main {
        margin-bottom: 20px;
    }

    .team-list-main.product-listing-main .team-list {
        height: 400px;
        margin-bottom: 15px;
    }

    .banner-img {
        margin-top: 0;
    }

    .product-slider .home-slide {
        height: 450px !important;
    }

    .typo-light {
        font-size: 18px;
    }

    .location-awards {
        padding: 20px 20px 60px 0;
    }

    .typo-light h4 {
        font-size: 15px;
    }

    .typo-light p {
        font-size: 14px;
        padding: 0 0 5px 0;
        line-height: 1.5;
    }

    .product-text {
        padding: 40px 0 10px 0;
    }

    .gt-arrow {
        width: 18px;
        height: 11px;
        -webkit-transform: translateY(-50%) rotate(0deg);
        -moz-transform: translateY(-50%) rotate(0deg);
        -ms-transform: translateY(-50%) rotate(0deg);
        -o-transform: translateY(-50%) rotate(0deg);
        transform: translateY(-50%) rotate(0deg);
    }

    .ios-drop {
        width: 85%;
    }

    .product-listing-dropdown {
        height: auto;
        justify-content: space-between;
        align-items: flex-start;
        flex-flow: column wrap;
        padding: 20px 0 41px;
    }

    .product-listing-dropdown .product-listing-sub-dropdown {
        margin-bottom: 13px;
    }

    .product-listing-dropdown .product-listing-sub-dropdown:last-child {
        margin-bottom: 0;
    }

    .product-listing-dropdown .product-listing-sub-dropdown:first-child {
        margin-right: 0;
    }

    .mainNav--home.transparent-top {
        background-image: none;
    }

    .approach-text.approach-height {
        min-height: auto;
    }

    .mb-80 {
        margin-bottom: 30px;
    }

    .splash .splash-brand img {
        width: 80%;
    }

    .gescout-sticky {
        opacity: 1;
    }
}

/* New Developer CSS Starts */

.disabled-color,
.rocco-filter .filter-collapse ul li a.disabled-color {
    color: #d3d3d3 !important;
}

.rocco-filter .filter-collapse ul li a.active {
    font-family: "akzidenz-grotesk-medium";
}

.rocco-filter .filter-collapse ul li a:hover {
    color: #999;
}

@media screen and (max-width: 575px) {
    .rocco-filter {
        width: 100%;
        padding: 30px 0 60px;
    }

    .rocco-filter .filter-individual {
        width: 100%;
    }

    .rocco-filter .filter-individual:first-child {
        padding-bottom: 30px;
        margin-top: 10px;
    }

    .rocco-filter #filter2 {
        /* padding-right: 100%; */
        margin-top: 65px;
        /* 45 */
    }

    .rocco-filter #filter2 ul {
        width: 100%;
        left: 0;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .rocco-filter {
        width: 100%;
    }
}

@media screen and (min-width: 860px) and (max-width: 1200px) {
    /* .rocco-filter #filter2{
   padding-left: 265px;
  } */
}

.banner-img.product-detail-bg {
    background-position: bottom center !important;
}

#navigation-cover {
    float: left;
    width: 100%;
    min-height: 80px;
    display: none;
}

#navigation-cover.show {
    display: block;
}

/* Navigation Cover settings */

@media (max-width: 767px) {
    #navigation-cover {
        display: none !important;
    }
}

/* Square Box Settings */

/*

.team-list-main.product-listing-main .col-md-6 {
  padding-bottom: 50%;
}
.team-list-main.product-listing-main .team-list {
  position: absolute;
  width:  calc(100% - 30px)!important;
  height: calc(100% - 30px)!important;
  margin-bottom: 0 !important;
}
@media (max-width: 767px) {
  .team-list-main.product-listing-main .col-md-6 {
      padding-bottom: 100%;
  }
}
@media (max-width: 575px) {
  .team-list-main.product-listing-main .team-list {
      height: calc(100% - 15px)!important;
  }
}

 */

/* Team Settings */

/*

.team-list-main .col-md-3 {
  padding-bottom: 25%;
}
.team-list-main .team-list {
  position: absolute;
  width:  calc(100% - 30px)!important;
  height: calc(100% - 30px)!important;
  margin-bottom: 0 !important;
}
@media (max-width: 767px) {
  .team-list-main .col-md-3 {
      padding-bottom: 50%;
  }
}
@media (max-width: 575px) {
  .team-list-main {
    width: 100%;
  }
  .team-list-main .col-md-3 {
      padding-bottom: 100%;
  }
}

 */

/* Approach Settings */

/*
.approach-sub-img {
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.approach-sub-img .img-ap-cover {
  position: absolute;
  width:  calc(100%)!important;
  height: 100% !important;
}
.last-row-style .col-sm-6 {
  overflow: hidden;
}
@media (max-width: 767px) {
  .col-md-6 + .col-md-6 .approach-sub-img {
    margin-top: 15px;
  }
}
@media (max-width: 575px) {
  .approach-sub-img .img-ap-cover {
      height: calc(100%)!important;
  }
  .col-md-6 + .col-md-6 .approach-sub-img {
    margin-top: 0px;
  }
  .last-row-style .col-sm-6 + .col-sm-6 .approach-text.approach-bottom {
    margin-top: 35px;
  }
}
 */

/* New Listing Page Settings */

/*

.news-img-ht {
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.news-img-ht .dflex-bg {
  position: absolute;
}
@media (max-width: 767px) {
  .news-img-ht {
    float: left;
    max-width: 100%;
  }
}
.more-img-ht {
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.more-img-ht .dflex-bg {
position: absolute;
}

@media (max-width: 767px) {
  .more-img-ht {
    float: left;
    max-width: 100%;
  }
}

 */

/* New Developer CSS Ends */

/* Font Size reverts for News and Team Details Page Starts */

.team-detail .team-member-text .approach-text h4 {
    font-size: 24px;
}

/*  line-height: 1.4; */

@media screen and (min-width: 576px) and (max-width: 767px) {
    .team-detail .team-member-text .approach-text h4 {
        font-size: 22px;
    }
}

@media screen and (max-width: 575px) {
    .team-detail .team-member-text .approach-text h4 {
        font-size: 20px;
    }
}

/* Font Size reverts for News and Team Details Page Ends */

/* Font Settings for Bottom 2 box Structure Starts */

.approach-bottom.approach-text h4 {
    font-size: 20px;
}

@media screen and (max-width: 991px) {
    .approach-bottom.approach-text h4 {
        font-size: 18px;
    }
}

/* Font Settings for Bottom 2 box Structure Ends */

/* Related Product Section Starts */

.related-project .approach-text h4 {
    font-size: 20px;
}

@media screen and (max-width: 991px) {
    .related-project .approach-text h4 {
        font-size: 18px;
        margin-bottom: 1px !important;
    }
}

/* Related Product Section Ends */

/* Changes on 5-7-2021 Starts */

@media screen and (max-width: 767px) {
    .home-animate {
        background-image: none;
    }

    .header-animate .mainNav--home.transparent-top {
        background-image: none;
    }
}

/* Changes on 5-7-2021 Ends */

/* New Settings Starts 16-8-2021 */

.filter-individual h3 {
    line-height: 1.5;
}

.filter-individual h3 a {
    font-size: 16px;
    font-family: "akzidenz-grotesk-medium";
    color: #272525;
    text-decoration: none;
}

.newfilter-settings.rocco-filter {
    width: 100%;
    /*97.674%; */
}

.newfilter-settings.rocco-filter .filter-individual {
    width: 25%;
}

.newfilter-settings.rocco-filter .item-tab-3 {
    /* margin-left: 2.326%; */
    padding-left: 15px;
}

.newfilter-settings.rocco-filter .filter-collapse {
    width: 50%;
}

.newfilter-settings.rocco-filter .item-pannel-3 {
    margin-left: 50.1%;
    padding-left: 15px;
}

/* @media screen and (min-width: 768px) and (max-width: 900px) {
  .newfilter-settings.rocco-filter .item-tab-3 {
    width: 33%;
  }
} */

@media screen and (max-width: 767px) {

    /* 575 */
    .newfilter-settings.rocco-filter {
        width: 100%;
    }

    .newfilter-settings.rocco-filter .filter-individual {
        width: 100%;
        padding-bottom: 30px;
    }

    .newfilter-settings.rocco-filter .item-tab-3 {
        margin-left: 0;
        padding-bottom: 0px;
    }

    .newfilter-settings.rocco-filter .filter-collapse {
        width: 101%;
    }

    .newfilter-settings.rocco-filter .item-pannel-3 {
        margin-left: 0;
    }

    .rocco-filter #filter2 {
        margin-top: 60px;
    }

    .rocco-filter #filter3 {
        margin-top: 120px;
    }

    /* setting for 767 */
    .rocco-filter #filter2 ul {
        width: 100%;
        left: 0;
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .newfilter-settings.rocco-filter .item-tab-3 {
        padding-left: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .newfilter-settings.rocco-filter .item-pannel-3 {
        margin-left: 52.4%;
    }
}

.disabled,
.not-found,
.no-product-found,
.disabled a {
    color: #dddddd !important;
}

/* New Settings Ends 16-8-2021 */

@media screen and (max-width: 767px) {
    .header-search {
        top: -36px;
        height: auto;
        left: 0;
    }

    .header-search input {
        padding-left: 0;
        font-size: 18px;
    }

    .header-search svg {
        width: 23px;
    }
}

@media screen and (max-width: 575px) {
    .search-detail h3 {
        font-size: 18px;
    }

    .search-detail p {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .rocco-filter .filter-collapse {
        top: 50px;
    }

    #filter1 ul,
    #filter3 ul {
        left: 0;
    }

    .rocco-filter #filter1 {
        padding-left: 15px;
    }
}

/* home page slider updates 16/11/2022 */

.video-author {
    position: absolute;
    bottom: 40px;
    width: 100%;
}

.video-author h2 {
    font-family: "akzidenz-grotesk-medium";
    font-weight: 500;
    color: #fff;
    font-size: 24px;
    /*轮播页字体大小 */
    display: inline-block;
    margin-bottom: 10px;
    /*轮播页字体行距大小 */
    transform: translateY(10px);
}

.video-author p {
    font-family: "akzidenz-grotesk", "Helvetica", "Arial", sans-serif;
    color: #fff;
    font-size: 18px;
    /*轮播页字体大小 */
    font-weight: 100;
    display: inline-block;
}

@keyframes moveUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@-webkit-keyframes moveUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.home-slide.slick-active .video-author .col-md-12 {
    animation-name: moveUp;
    animation-duration: 0.75s;
    animation-delay: 1.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

.home-slide {
    position: relative;
}

.home-slide video,
.home-slide img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1016px) {
    .home-slide video {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        object-fit: cover;
    }
}

/* Newsletter on news page 21/12/2022 */

.news-wrap {
    min-height: 80px;
    align-items: center;
}

.news-wrap h2 {
    font-family: "akzidenz-grotesk-medium";
    font-size: 20px;
    color: #231f20;
    margin-bottom: 0;
}

.news-wrap .news-form {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

.news-wrap .form-group {
    margin-bottom: 0;
    width: 50%;
    position: relative;
}

.news-wrap .form-group input {
    font-style: normal;
    font-size: 20px;
    color: #999;
    border: none;
    padding: 0;
}

.news-wrap .form-group input::placeholder {
    color: #999;
}

.news-wrap .form-group input:focus {
    box-shadow: none;
    color: #000;
}

.news-wrap .form-group input:focus::placeholder {
    color: #000;
}

.news-wrap .btn-primary {
    background-color: transparent;
    font-style: normal;
    font-size: 20px;
    color: #999;
    border: none;
    padding: 0;
    margin-left: 20px;
}

.news-wrap .btn-primary:hover {
    color: #000;
}

.news-wrap .btn-primary:active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #000 !important;
}

.news-wrap .btn-primary:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

.news-wrap .news-subscribed {
    width: 100%;
}

.news-wrap .news-subscribed p {
    font-size: 20px;
    color: #000;
    margin-bottom: 0;
}

.news-wrap .error {
    width: 100%;
    font-size: 14px;
    color: #FF0000;
    position: absolute;
    left: 0;
    bottom: -7px;
}

@media screen and (min-width: 1200px) and (max-width: 1349px) {
    .news-wrap .form-group input {
        font-size: 18px;
    }

    .news-wrap .btn-primary {
        font-size: 18px;
    }

    .news-wrap .news-subscribed p {
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .news-wrap .form-group input {
        font-size: 17px;
    }

    .news-wrap .btn-primary {
        font-size: 17px;
    }

    .news-wrap .news-subscribed p {
        font-size: 17px;
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .news-wrap .form-group input {
        font-size: 18px;
    }

    .news-wrap .btn-primary {
        font-size: 18px;
    }

    .news-wrap .news-subscribed p {
        font-size: 18px;
    }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
    .news-wrap .form-group {
        width: calc(100% - 100px);
    }

    .news-wrap .news-form {
        justify-content: space-between;
    }

    .news-wrap .error {
        font-size: 13px;
    }
}

@media screen and (min-width: 0px) and (max-width: 575px) {
    .news-wrap {
        min-height: auto;
        align-items: flex-start;
        padding-top: 32px;
    }

    .news-wrap h2 {
        margin-bottom: 10px;
        font-size: 18px;
    }
}

/* Contact us page career link addition */

.mp-sub-menu.anchor-list ul li.active a {
    color: #231f20;
    cursor: text;
}

.approach-text.career-head {
    padding-top: 15px;
}

.appr-para {
    color: #000;
}

.approach-text.career-head h4 {
    margin-bottom: 20px;
    font-size: 20px;
}

@media screen and (min-width: 576px) and (max-width: 991px) {
    .approach-text.career-head h4 {
        font-size: 18px;
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .approach-text.career-head {
        padding: 0 0 0 0;
    }

    .approach-text.career-head h4 {
        margin-bottom: 0 !important;
        padding: 20px 0;
    }
}

/* Nav tabs for career page */

.nav-pill-main-div ul.tabs {
    display: block;
}

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li h4 {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: 0.3s ease all;
    width: fit-content;
}

@media screen and (min-width: 0px) and (max-width: 991px) {
    ul.tabs li h4 {
        font-size: 18px !important;
    }
}

ul.tabs li.current {
    color: #000;
    transition: 0.3s ease all;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    ul.tabs li {
        border-bottom: 1px solid #010101;
    }
}

ul.tabs li.current h4 {
    font-size: 20px;
    color: #000;
    font-weight: 500;
    font-family: "akzidenz-grotesk-medium";
    transition: 0.3s ease all;
}

ul.tabs li.current p {
    color: #a6a8aa;
}

.tab-content {
    display: none;
    transition: 0.3s ease all;
}

.tab-content.current {
    display: inherit;
    transition: 0.3s ease all;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .tab-content.current {
        margin-bottom: 50px;
    }
}

@media screen and (min-width: 0px) and (max-width: 575px) {
    .approach-main.career-main .col-sm-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .approach-main.career-main .approach-text.approach-bottom {
        padding: 32px 0 0 0;
    }

    .approach-main.career-main .approach-text.approach-bottom h4 {
        margin-bottom: 30px !important;
    }

    .approach-main.career-main .approach-sub-img-height {
        margin-bottom: 40px;
    }
}

.approach-text.career-head .tab-content p:first-of-type {
    display: none;
}

.approach-text.career-head .tab-content p:last-of-type {
    display: none;
}

/* Newsletter on news page END 21/12/2022 */

/* .home-slide video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* @media screen and (max-width: 992px) {
  .video-author {
    bottom: 115px;
  }
}

@media screen and (max-width: 830px) { 
  .video-author {
    bottom: 150px;
  }
  .video-author h2 {
    font-size: 18px;
  }
  .video-author p {
    font-size: 18px;
  }
} */

/*# sourceMappingURL=style.css.map */







/* 首页轮播定义从下往上划出的动画 */
@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    20% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

/* 应用动画到文本元素 */
.slide-animate {
    animation: slideUp 5s infinite;
    /* 持续时间5秒，无限循环，可以根据需要调整 */
}

/* 首页轮播定义从下往上划出的动画 */





/* 用于在电脑版上显示第一张图片，并在手机版（或响应式设计下）显示第二张图片 */

.fullscreen-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.fullscreen-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保图片自适应全屏并保持比例 */
}

/* 用于在电脑版上显示第一张图片，并在手机版（或响应式设计下）显示第二张图片 */





























/* 页尾点击图片或字体弹出二维码 */

ul.text-center {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

ul.text-center li {
    margin: 10px 0;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: #007BFF;
}

/* 模态框样式 */
.modal {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal img {
    margin: 8% auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
}



/* 页尾点击图片或字体弹出二维码 */







/* 页尾二维码样式 */
.c-weixin {
    display: none;
    /* 初始状态隐藏，可以通过JavaScript动态显示 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 910;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}

.c-weixin .c-img-box {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    width: 200px;
    border-radius: 25px;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.c-weixin .c-img-box img {
    width: 100%;
    /* 确保图片适应父容器宽度 */
}

img {
    border: 0;
    vertical-align: top;
}

.c-weixin .c-img-box .c-text {
    padding-top: 10px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: #333;
}










@media (min-width:853px) {
    footer nav {
        height: 150px;
        align-items: center !important;
    }

    footer .footer-list.footer-second-list ul li {
        text-align: start;
        !important;
    }

}


@media screen and (min-width: 768px) and (max-width: 991px) {
    footer nav {
        height: 150px;
        align-items: center !important;

    }

    footer .footer-list li a {
        font-size: 17px;
        line-height: 1.5;
        !important;
    }
}

@media (min-width:1240px) {
    footer nav {
        height: 100px;
        align-items: center !important;
    }
}





/* 这个动态是增加字体出现有动态的效果的样式 */
/* 定义向上划出的动画 */
.animate-on-scroll h4 strong {
    opacity: 0;
    transform: translateY(100%);
    /* 从视口下方开始 */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    /* 动画持续时间和缓动函数 */
}

.animate-on-scroll.visible h4 strong {
    opacity: 1;
    transform: translateY(0);
    /* 移动到原始位置 */
}


.animate-on-scroll h3 {
    opacity: 0;
    transform: translateY(100%);
    /* 从视口下方开始 */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    /* 动画持续时间和缓动函数 */
}

.animate-on-scroll.visible h3 {
    opacity: 1;
    transform: translateY(0);
    /* 移动到原始位置 */
}


.animate-on-scroll h5 {
    opacity: 0;
    transform: translateY(100%);
    /* 从视口下方开始 */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    /* 动画持续时间和缓动函数 */
}

.animate-on-scroll.visible h5 {
    opacity: 1;
    transform: translateY(0);
    /* 移动到原始位置 */
}


/* 定义向上划出的动画 */
.animate-on-scroll h4 {
    opacity: 0;
    transform: translateY(100%);
    /* 从视口下方开始 */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    /* 动画持续时间和缓动函数 */
}

.animate-on-scroll.visible h4 {
    opacity: 1;
    transform: translateY(0);
    /* 移动到原始位置 */
}

.animate-on-scroll p {
    opacity: 0;
    transform: translateY(100%);
    /* 从视口下方开始 */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    /* 动画持续时间和缓动函数，可以根据需要调整时间 */
    margin-top: 10px;
    /* 可选，为了动画效果看起来更自然，给段落一些顶部外边距 */
}

.animate-on-scroll.visible p {
    opacity: 1;
    transform: translateY(0);
    /* 移动到原始位置 */
}









/* 手机版能显示出图片，但是电脑版想隐藏不显示图片 */
/* 默认隐藏图片，因为我们要根据屏幕宽度来决定是否显示 */
.responsive-image {
    display: none;
    /* 默认不显示图片 */
}

/* 媒体查询：当屏幕宽度小于或等于768px时，显示手机版图片 */
@media (max-width: 768px) {
    .responsive-image {
        display: block;
        /* 显示图片 */
        width: 100%;
        /* 设置图片宽度为容器宽度的100% */
        height: auto;
        /* 保持图片比例 */
    }
}




/* Projects 页，作品区的排版 */
.container-word {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.item25,
.item15,
.item16 {
    position: relative;
    flex: 1;
    /* 假设这是为了布局需要，与放大效果无关 */
    overflow: hidden;
    /* 防止图片放大时超出容器 */
    cursor: pointer;
    /* 鼠标悬停时显示为手指，表明可点击 */
}

/* 为图片添加过渡效果 */
.item25 .image,
.item15 .image,
.item16 .image {
    transition: transform 1.5s ease;
    /* 0.3秒内平滑过渡 */
    display: block;
    /* 确保图片是块级元素，以便正确应用过渡效果（可选） */
}

/* 当鼠标悬停在.item25上时，放大图片 */
.item25:hover .image,
.item15:hover .image,
.item16:hover .image {
    transform: scale(1.1);
    /* 放大到原来的1.1倍 */
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}



.sub-title {
    font-size: 12px;
    line-height: 2;
}

.main-title {
    font-size: 18px;
    line-height: 1.334;
}



/* 响应式设计 */
@media (min-width: 767px) {

    /* 左大图右小图 */
    .item25:nth-child(1) {
        flex: 2.5;
    }

    .item25:nth-child(2) {
        flex: 1.5;
    }

    /* 左小图右大图 */
    .item15:nth-child(1) {
        flex: 1.5;
    }

    .item15:nth-child(2) {
        flex: 2.5;
    }

    /* 左小图右大图 */

}

@media (max-width:767px) {

    /* 左大图右小图 */
    .item25,
    .item15 {
        flex: 1 0 100%;
    }
}

/* 鼠标悬停效果 */
.item25:hover .overlay,
.item15:hover .overlay {
    opacity: 1;
}

/* 保持原有样式的同时添加16:7比例控制 */
.item16 {
    position: relative;
    width: 100%;
    padding-bottom: calc(7 / 16 * 100%);
    /* 16:7 比例 */
    height: 0;
    overflow: hidden;
    cursor: pointer;
}

.item16 .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item16:hover .image {
    transform: scale(1.05);
}

.item16 .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 20px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item16:hover .overlay {
    opacity: 1;
}

.item16 .title {
    color: #fff;
    text-align: center;
}

.item16 .sub-title {
    font-size: 14px;
    margin-bottom: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}



.item16:hover .sub-title,
.item16:hover .main-title {
    opacity: 1;
    transform: translateY(0);
}

/* 移动端响应式 */
@media screen and (max-width: 767px) {
    .item16 {
        padding-bottom: 0;
        /* 移除固定比例限制 */
        flex-direction: column;
        height: auto;
        position: relative;
    }

    .item16 .image {
        position: relative;
        /* 改为相对定位 */
        width: 100%;
        height: auto;
        /* 让图片高度自适应 */
        object-fit: contain;
        /* 确保图片完整显示 */
    }
}




/* 作品区第4行布局样式 */
.container-word {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.item19-container {
    display: flex;
    width: 100%;
    height: 100%;
    /* 设置整体容器高度为原来的两倍 */
}

.item19-left {
    flex: 1;
    /* 改为1份 */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    /* 使用100%高度填充容器 */
}

.item19-right {
    flex: 2;
    /* 改为2份 */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 使用100%高度填充容器 */
}
.item19-right-new{
    flex:1;  /* 这里从原来1改为4% */
    /* 改为2份 */
    display:flex;
    flex-direction: column;
    height:100%;
    /* 使用100%高度填充容器 */
    
}

.item19-right .item19 {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 50%;
    /* 右侧每个item占50%高度 */
    
}

.item19 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.item19 .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease;
    
}

.item19:hover .image {
    transform: scale(1.1);
}

.item19 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item19:hover .overlay {
    opacity: 1;
}

.item19 .title {
    text-align: center;
    color: white;
}

.item19 .sub-title {
    font-size: 14px;
    line-height: 2;
}

.item19 .main-title {
    font-size: 18px;
    line-height: 1.334;
}

/* 移动端响应式 */
@media screen and (max-width: 767px) {
    .item19-container {
        flex-direction: column;
        height: auto;
    }

    .item19-left {
        /* height: 400px; */
        flex: auto;
    }

    .item19-right .item19 {
        /* height: 300px; */
    }

}

/* 作品区动画 */
.scale-in {
    transform: scale(1.5);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.scale-in.visible {
    transform: scale(1);
    opacity: 1;
}

/* 作品内页图片从下往上划入的动画 */
.slide-in-fly {
    transform: translateY(100px);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.slide-in-fly.visible {
    transform: translateY(0);
    opacity: 1;
}









/* logo墙动态效果 */
.logo-wall {
    display: flex;
    flex-wrap: wrap;
    max-width: 1650px;
    margin: auto;
}

.logo-item {
    width: calc(16.666% - 10px);
    /* 6个logo一行，减去一些间距 */
    /* width: calc((100% - 80px) / 7); 7个logo一行，减去一些间距 */
    /* 增加高度以容纳放大后的图片 */
    height: 100px;
    /* 原始高度 100px * 1.2 = 120px */
    margin: 5px;
    background-color: #fff;
    transition: transform 0.3s ease;
    cursor: pointer;
    position: relative;
    /* 如果不希望图片放大后超出边界，可以保持 overflow: hidden;
       如果希望看到完整的放大效果，可以移除或调整此属性 */
    overflow: hidden;
}

 .logo-item img {
    width: 100%;
    height: 75%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease, opacity 0.5s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: bottom center;
} 


.logo-item:hover img {
    /* 不旋转，但放大 */
    transform: scale(1.2);
    opacity: 0.8;
    /* 增加一点透明度 */
}

/* 响应式设计，手机版一行3个logo */
@media (max-width: 768px) {
    .logo-item {
        /* width: calc(16.666% - 10px); */
        height: 50px;
        margin: 20px 20px 20px 20px;
        background-color: #fff;
        transition: transform 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}

/* 针对手机屏幕（max-width: 768px 至 max-width: 1024px），使用三列布局 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    .logo-item {
        width: calc(33.333% - 40px); /* 三列布局，每列宽度为1/3减去间距 */
        margin: 5px 20px; /* 简化写法，上下5px，左右20px */

    }
}

@media screen and (max-width: 767px) {
    .logo-item {
        width: calc(50% - 40px); /* 两列布局，每列宽度为1/2减去间距 */
        margin: 5px 20px; /* 简化写法，上下5px，左右20px */
    }
}

/* 针对平板及更大屏幕（min-width: 1025px 至 max-width: 1920px），使用六列布局 */
@media screen and (max-width: 1280px) and (min-width: 1024px) {
    .logo-item {
        width: calc(16.666% - 10px); /* 六列布局，每列宽度为1/6减去间距 */

    }
    .logo-item img {
        height: 50%;
    }
}
/* logo墙动态效果 */





/* 联系页 */

.approach-main.container-word {
    display: flex;
    flex-direction: row; /* 默认为行方向，但可以明确写出 */
    justify-content: space-between; /* 根据需要调整间距 */
    align-items: center; /* 垂直居中 */
}
.container-word .ewm img{
   width: 180px;
   margin: 10px 20px 10px -10px;
}

.container-word .ewm span{
    display: flex;
    align-items: flex-end;
    padding: .3rem 0 0 .15rem;
    text-align:center;
    margin: 0px 0px 100px 0px;
}


.approach-text2 {
    color: #272525;
    font-size: 20px;
    padding: 60px 20px 10px 0;
}
.approach-text2 h4 {
    font-size: 28px;
    margin-bottom: 90px;
    color: #272525;
    line-height: 1.5;
}
.approach-text2 h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #272525;
    line-height: 1.8;
    text-align: justify;
    word-spacing: normal;
    letter-spacing: normal;
}
.approach-text2 h5 {
    font-size: 15px;
    margin-bottom: 50px;
    color: #272525;
    line-height: 1.6;
    /*text-align: justify;*/
    word-spacing: normal;
    letter-spacing: normal;
}
.approach-text2 h4 strong {
    font-weight: 500;
    font-family: "akzidenz-grotesk-medium";
}

.approach-text22 h4 strong {
    font-weight: 500;
    font-family: "akzidenz-grotesk-medium";
}
.approach-text22 {
    color: #272525;
    font-size: 20px;
    padding: 10px 20px 10px 0;
}
.approach-text22 h4 {
    font-size: 28px;
    margin-bottom: 90px;
    color: #272525;
    line-height: 1.5;
}
.approach-text22 h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #272525;
    line-height: 1.8;
    text-align: justify;
    word-spacing: normal;
    letter-spacing: normal;
}
.approach-text22 h5 {
    font-size: 18px;
    margin-bottom: 50px;
    color: #272525;
    line-height: 1.6;
    text-align: justify;
    word-spacing: normal;
    letter-spacing: normal;
}

.animate-on-scroll2.visible h4 {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll2.visible p {
    opacity: 1;
    transform: translateY(0);
}
.typo-light2 h4 {
    font-size: 20px;
    line-height: 1.8;
}
.typo-light2 h4{
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #231f20;
    padding: 0 0 0 0;
}
.typo-light2 p {
    font-size: 18px;
    padding: 0 0 5px 0;
    line-height: 1.5;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    margin-top: 10px;
}
.typo-light2 {
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #939598;
    line-height: 1.3;
}
.location-awards2 {
    padding: 50px 20px 80px 0;
}
@media screen and (max-width: 1024px){

.approach-text2 {
    margin-bottom: 1px;
    font-size: 18px;
    line-height: 1;
    padding: 30px 0px 0px 0;
    color: #272525;
}

.approach-text2 h4 {
    font-size: 28px;
    margin-bottom: 0px;
    color: #272525;
    line-height: 1.5;
}
.approach-text22 h4 {
    font-size: 28px;
    margin-bottom: 0px;
    color: #272525;
    line-height: 1.5;
}

/*.approach-text2 h5 {*/
/*    font-size: 18px;*/
/*    margin-bottom: 0px;*/
/*    color: #272525;*/
/*    line-height: 1.6;*/
/*    text-align: justify;*/
/*    word-spacing: normal;*/
/*    letter-spacing: normal;*/
/*}*/
.approach-text2 h2 {
    font-size: 20px;
    margin-bottom: 5px !important;
    font-family: "akzidenz-grotesk-medium";
    line-height: 1.5;
    font-weight: 600;
}
.approach-text2 h2-1 {
    font-size: 22px;
    margin-bottom: 0px !important;
    font-family: "akzidenz-grotesk-medium";
    line-height: 1;
}
.approach-text2 h1 {
    font-size: 16px;
    margin-bottom: 20px !important;
    font-family: "akzidenz-grotesk-medium";
    line-height: 1.5;
    padding: 10px 0px;
}
.container-word .ewm span {
    display: flex;
    align-items: flex-end;
    padding: 0.3rem 0 0 0.15rem;
    text-align: center;
    margin: 0px 0px 10px 0px;
}
.location-awards2 {
    padding: 20px 20px 0px 0;
}

.related-project .approach-text2 h4 {
    font-size: 18px;
    margin-bottom: 1px !important;
}
.animate-on-scroll2.visible p {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll2.visible h4 {
    opacity: 1;
    transform: translateY(0);
}
.typo-light2 h4 {
    font-size: 16px;
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #231f20;
    padding: 0 0 0 0;
}
}

.typo-light2 {
    font-family: "akzidenz-grotesk", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #939598;
    line-height: 1.3;
}

.animate-on-scroll2 p {

    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    margin-top: 10px;
}



@media (max-width: 1280px){
    .approach-text2 {
        color: #272525;
        font-size: 20px;
        padding: 20px 20px 10px 0;
    }
    .approach-text2 h4 {
        font-size: 28px;
        margin-bottom: 30px;
        color: #272525;
        line-height: 1.5;
    }
    .approach-text22 h4 {
        font-size: 28px;
        margin-bottom: 10px;
        color: #272525;
        line-height: 1.5;
    }
    .approach-text2 h5 {
        font-size: 15px;
        margin-bottom: 5px;
        color: #272525;
        line-height: 1.6;
        /*text-align: justify;*/
        word-spacing: normal;
        letter-spacing: normal;
    }
    .approach-text22 {
        color: #272525;
        font-size: 20px;
        padding: 5px 5px 5px 0;
    }
}




/* 服务页 */
/* 卓美服务列表容器 */
.zhuomei-service-list {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 30px;
}

/* 卓美服务列表顶部区域 */
.zhuomei-top {
    position: relative;
    display: flex;
    padding: 60px 20px 10px 960px; /* 调整了padding以适应新的布局 */
}

/* 卓美标题（中文） */
.zhuomei-titn {
    position: absolute;
    left: 0;
    font-size: 48px;
    line-height: 1em;
    font-weight: 900;
    color: #000;
    padding: 10px 20px 0px 150px; /* 调整了padding */
}

/* 卓美信息区域 */
.zhuomei-mes {
    display: inline-block;
    color: #000;
}

/* 卓美英文标题 */
.zhuomei-tit {
    font-size: 48px;
    line-height: 58px;
    font-weight: bold;
    font-family: "PingFang SC", "HanHei SC", "Helvetica Neue", Microsoft Yahei, "Helvetica", "STHeitiSC-Light", "Arial", sans-serif;
}

/* 卓美服务描述（中文） */
.zhuomei-sum1 {
    margin: 32px 0 33px;
    font-size: 22px;
    line-height: 38px;
}

/* 卓美服务描述（中文） */
.zhuomei-sum100 {
    margin: 32px 0 23px;
    font-size: 22px;
    line-height: 10px;
}

/* 卓美服务描述（英文） */
.zhuomei-sum2 {
    font-size: 16px;
    line-height: 26px;
}

/* 初始状态：元素位于视窗下方且透明度为0 */
.zhuomei-fade-in-up {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* 动画结束状态：元素回到原位且完全可见 */
.zhuomei-fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}
.zhuomei-titn8 strong{
    font-size: 48px;
    line-height: 2em;
    color: #000;
    padding: 10px 20px 0px 0px;
    font-weight: bold;
    font-family: "PingFang SC", "HanHei SC", "Helvetica Neue", Microsoft Yahei, "Helvetica", "STHeitiSC-Light", "Arial", sans-serif;
}
.zhuomei-titn8{
 
    font-size: 48px;
    line-height: 1em;
    font-weight: 900;
    color: #000;

}






/* 幻灯片 */

.zhuomei70-slider{
    position: relative;
    width: 100%; /* 或者您需要的任何宽度 */
    height: 800px; /* 或者您需要的任何高度 */
    overflow: hidden;
}

.zhuomei68-slider,
.zhuomei69-slider,
.zhuomei71-slider, 
.zhuomei72-slider{
    position: relative;
    width: 100%; /* 或者您需要的任何宽度 */
    height: 900px; /* 或者您需要的任何高度 */
    overflow: hidden;
}
 
.zhuomei68-slide,
.zhuomei69-slide,
.zhuomei70-slide,
.zhuomei71-slide,
.zhuomei72-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
 
.zhuomei68-slide.zhuomei68-active,
.zhuomei69-slide.zhuomei69-active,
.zhuomei70-slide.zhuomei70-active, 
.zhuomei71-slide.zhuomei71-active,
.zhuomei72-slide.zhuomei72-active  {
    opacity: 1;
}


/* 服务字体 */
.zhuomei-top8 {
    position: relative;
    display: flex;
    padding:80px 0px 0px 120px;
    }
    .zhuomei-sum8 strong{
        margin: 15px 0 23px;
        font-size: 22px;
        line-height: 15px;
    }
    .zhuomei-sum8 {
        margin: 32px 0 23px;
        font-size: 16px;
        line-height: 15px;
        padding:0px 0px 0px 150px;
    }
    .zhuomei-titn strong{
        font-size: 48px;
        line-height: 1em;
        font-weight: 900;
        color: #000;
        font-weight: bold;
        font-family: "PingFang SC", "HanHei SC", "Helvetica Neue", Microsoft Yahei, "Helvetica", "STHeitiSC-Light", "Arial", sans-serif;
    }


/* 确保所有内容在移动设备上可读 */
@media screen and (max-width: 1280px){
    .zhuomei-titn strong {
        font-size: 20px; /* 进一步减小标题字体 */
    }

    .zhuomei-sum8 {
        font-size: 18px; /* 进一步减小段落字体 */
    }

    .zhuomei-sum8 strong {
        font-size: 18px; /* 稍微大于普通文本 */
    }
    .zhuomei-titn8 strong{
        font-size: 16px;
        margin-bottom: 10px !important;
        color: #272525;
        font-weight: bold;
        font-family: "PingFang SC", "HanHei SC", "Helvetica Neue", Microsoft Yahei, "Helvetica", "STHeitiSC-Light", "Arial", sans-serif;
        line-height: 1.5;
        text-align: left;
        /* padding: 80px 0px 0px 0px; */
    }
    /* 幻灯片容器 */
.zhuomei6-slider {
    position: relative;
    width: 100%; /* 宽度自适应 */
    height: 100vh; 
    overflow: hidden;
}

/* 幻灯片内容 */
.zhuomei6-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 宽度自适应 */
    height: 100%; /* 高度自适应，与容器相同 */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover; /* 确保背景图片（如果使用的是背景图片的话）能够覆盖整个幻灯片容器 */
    background-position: center; /* 背景图片居中显示 */
}

/* 幻灯片内容中的图片（如果直接使用<img>标签） */
.zhuomei6-slide img, 
.zhuomei68-slide img,
.zhuomei69-slide img,
.zhuomei70-slide img,
.zhuomei71-slide img,
.zhuomei72-slide img{
    width: 100%; /* 图片宽度自适应 */
    height: auto; /* 图片高度自动调整以保持比例 */
    display: block; /* 移除图片底部的间隙 */
    
}

/* 活跃状态的幻灯片 */
.zhuomei6-slide.zhuomei6-active {
    opacity: 1;
}

.zhuomei70-slider{
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.zhuomei6-slider,
.zhuomei68-slider,
.zhuomei69-slider,
.zhuomei71-slider,
.zhuomei72-slider{
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.zhuomei-service-list {
    padding: 20px;
}

.zhuomei-titn8 {
    font-size: 23px;
    margin-bottom: 10px !important;
    color: #272525;
    line-height: 1.5;
    text-align: left;
    /* padding: 80px 0px 0px 0px; */
    font-weight: 500;
    
}
/* 顶部标题样式 */
.zhuomei-top8 {
    position: relative;
    display: block; /* 使用block以确保内容垂直堆叠 */
    padding: 0px;
}

.zhuomei-titn strong {
    font-size: 24px; /* 减小字体以适应小屏幕 */
    line-height: 1.2em;
    font-weight: bold;
    color: #000;
}

/* 内容段落样式 */
.zhuomei-mes {
    margin-top: 0px;
    /* display: inline-block; */
      
}

.zhuomei-sum8 {
    font-size: 10px; /* 减小字体以适应小屏幕 */
    line-height: 1.5em;
    margin: 10px 0;
    padding-left: 0; /* 移除左侧内边距 */
    padding: 0px 25px 0px 0px;
}

.zhuomei-sum8 strong {
    margin: 0; /* 移除顶部和底部边距 */
    display: block; /* 使强调内容块级显示，便于控制布局 */
    font-size: 14px; /* 稍微大于普通文本 */
    line-height: 1.2em;
}
    .zhuomei-service-list {
       max-width: 100%;
    }
    .zhuomei-top  {
        margin-bottom: 1px;
        font-size: 18px;
        line-height: 1;
        padding: 0px 0px 0px 0px;
        color: #272525;
}


.zhuomei-titn {
    font-size: 23px;
    margin-bottom: 10px !important;
    color: #272525;
    line-height: 1.5;
    text-align: left; /* 明确指定向左对齐 */
    padding:80px 0px 0px 0px;
    font-weight: 500;
}
.zhuomei-tit {
    font-size: 23px;
    line-height: 58px;
    font-weight: bold;
    font-family: "PingFang SC", "HanHei SC", "Helvetica Neue", Microsoft Yahei, "Helvetica", "STHeitiSC-Light", "Arial", sans-serif;
    line-height: 1.5;
    padding: 0px 0px 0px 0px;
}
.zhuomei-sum1 {
    font-size: 15px;
    color: #272525;
    line-height: 1.8;
    text-align: justify;
    word-spacing: normal;
    letter-spacing: normal;
    padding: 30px 0px 0px 0px;
    margin:30px 0 5px;
}
.zhuomei-sum2 {
    font-size: 16px;
    margin-bottom: 10px !important;
    line-height: 1.5;
    /* text-align: justify; */
    color: #939598 !important;
    padding: 10px 0px 0px 0px;
}

}









/* 
作品内页视频样式 */

.zhuimei-video-container {
    position: relative;
    width: 100%; /* 修改为百分比以适应不同屏幕尺寸 */
    height: 0; /* 高度初始化为0，使用padding-bottom技巧来保持宽高比 */
    padding-bottom: 56.25%; /* 16:9的宽高比，即9/16*100% */
    overflow: hidden;
}
 
.zhuimei-video-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 与padding-bottom相同，用于维持宽高比 */
}
 
.video-cover,
.zhuimei-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.video-cover {
    display: block; /* 确保图片占据整个容器 */
    cursor: pointer;
    transition: opacity 0.5s ease;
}
   
 
.zhuimei-video {
    display: none; /* 初始隐藏 */
    z-index: 1; /* 确保视频在封面之上 */
}
 
.volume-control {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 距离顶部50% */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%, -50%); /* 移动自身宽高的50%，以实现居中 */
    font-size: 2rem; /* 图标大小，可以根据需要调整 */
    color: white; /* 图标颜色，确保在图片上可见 */
    cursor: pointer; /* 鼠标悬停时显示为手形，表示可点击 */
    z-index: 1; /* 确保图标在图片上方显示 */
    /* 如果使用图片作为图标，可以替换下面的font-size和color属性，并添加width和height属性 */
}


.video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; /* 图标宽度 */
    height: 50px; /* 图标高度 */
    background-image: url('path-to-your-play-icon.png'); /* 图标图片路径 */
    background-size: contain; /* 确保图片适应容器大小 */
    background-repeat: no-repeat; /* 不重复图片 */
    cursor: pointer;
    z-index: 1;
}
.video-icon img {
    width: 100%; /* 如果图标图片需要适应容器大小 */
    height: auto; /* 保持图标的宽高比 */
}




/* 电脑版显示，手机版不显示图片 */
/* 手机端完全隐藏容器 */
@media (max-width: 768px) {
    .fullscreen-image2 {
        display: none !important;
    }
}
/* 电脑端显示图片（覆盖默认的data-uri） */
@media (min-width: 769px) {
    .desktop-only-image2 {
        content: url("https://kk.zhuomei.com.cn/design/projects/006/4.jpg");
    }
}













/* 基础样式 */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* 图片间距 */
}

.gallery-item {
    position: relative;
    flex: 1 1 calc(50% - 10px); /* 电脑端两图平分宽度 */
}

.responsive-image-AI {
    display: block;
    width: 100%;
    height: auto;
}

.image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 移动端样式 */
@media (max-width: 768px) {
    .gallery-item {
        flex: 1 1 100%; /* 移动端单图占满整行 */
        margin-bottom: 0px;
    }
}